<template>
	<div>
		<!-- 头部 -->
		<div class="header">
			<el-row style="padding: 5px 0 0 0;">
				<el-col :span="4">
					组织名称:
					<el-input v-model="aName" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="4">
					组织id:
					<el-input v-model="aId" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="4">
					<template>
						资源分类:
						<el-select v-model="role" clearable placeholder="全部">
							<el-option label="广告主" value="ADVERTISER">
							</el-option>
							<el-option label="管理员授权的纵横组织" value="CUSTOMER_ADMIN">
							</el-option>
							<el-option label="协作者授权的纵横组织" value="CUSTOMER_OPERATOR">
							</el-option>
							<el-option label="代理商" value="AGENT">
							</el-option>
							<el-option label="二级代理商" value="CHILD_AGENT">
							</el-option>
							<el-option label="星图客户" value="PLATFORM_ROLE_STAR">
							</el-option>
							<el-option label="星图代理商" value="PLATFORM_ROLE_STAR_AGENT">
							</el-option>
							<el-option label="抖音号" value="PLATFORM_ROLE_AWEME">
							</el-option>
							<el-option label="星图MCN" value="PLATFORM_ROLE_STAR_MCN">
							</el-option>
						</el-select>
					</template>
				</el-col>
				<el-col :span="2">
					<el-button size="mini" @click="selectLike"
						style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
						查询结果</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="success" @click="goToExternalUrl" icon="el-icon-circle-plus-outline"
						plain>新增授权</el-button>
				</el-col>
			</el-row>
		</div>
		<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{ textAlign: 'center' }"
			:data="advertisersList.records" stripe style="width: 100% width: 80%;margin: auto">
			<el-table-column property="id" label="编号">
			</el-table-column>
			<el-table-column property="advertiserId" label="组织id">
			</el-table-column>
			<el-table-column property="advertiserName" label="授权用户">
			</el-table-column>
			<el-table-column label="账号角色">
				<template slot-scope="scope">
					<span>{{scope.row.accountRole=="CUSTOMER_ADMIN"?"管理员授权的纵横组织":"其他"}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<el-row slot-scope="scope">
					<el-col span="6"><el-button type="text" size="mini"
							@click="dialogVisible=true,id=scope.row.id">添加ck</el-button></el-col>
					<el-col span="18"><el-button type="text" size="mini"
							@click="deletes(scope.row.id)">删除</el-button></el-col>
				</el-row>
			</el-table-column>
		</el-table>
		<el-dialog title="添加ck" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10}" placeholder="请输入内容" v-model="ck">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false,update()">确 定</el-button>
			</span>
		</el-dialog>
		<div>
			<el-row style="margin: 20px 0;">
				<el-col :span="11">
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="4" :page-sizes="[10, 20, 50, 100]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="advertisersList.total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import '@/assets/css/index.css'
	import qs from 'qs'
	export default {
		name: "organiZation",
		data() {
			return {
				id: '',
				ck: '',
				advertisersList: [],
				resourceCategory: [],
				aName: '',
				aId: '',
				role: '',
				categoryIds: '',
				dialogVisible: false,
				description: '',
				title: '',
				resource: [],
				roleDescriptions: {

				}
			}
		},
		created() {
			let than = this
			this.$axios.post('advertisers/list', qs.stringify({
				size: 10,
				current: 1,
				aName: than.aName,
				aId: than.aId,
				role: than.role
			})).then((res) => {
				than.advertisersList = res.data;
				console.log(than.advertisersList)
			})
		},
		methods: {
			
			update() {
				let than = this;
				this.$axios.post('advertisers/updates', qs.stringify({
					id: than.id,
					ck: than.ck
				})).then((res) => {
					console.log(res)
				})
			},
			handleSizeChange(val) {
				let that = this
				this.$axios.post('advertisers/list', qs.stringify({
					size: val,
					current: 1,
					aName: that.aName,
					aId: that.aId,
					role: that.role
				})).then((res) => {
					that.resourceList = res.data;
					console.log(that.returnReasonLsit)
				})
			},
			handleCurrentChange(val) {
				let that = this;
				this.$axios.post('advertisers/list', qs.stringify({
					size: 10,
					current: val,
					aName: that.aName,
					aId: that.aId,
					role: that.role
				})).then((res) => {
					that.resourceList = res.data;
				})
			},
			goToExternalUrl() {
				// 使用 window.location.href 跳转到外部 URL  
				window.location.href =
					'https://open.oceanengine.com/audit/oauth.html?app_id=1797546706202640&state=your_custom_params&scope=%5B300000000%2C2%2C4%2C5%2C9%2C130%2C110%2C112%2C14%2C120%2C122%2C123%2C124%2C100000005%5D&material_auth=1&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2F&rid=tz4875q5khk'; // 外部 URL  
			},
			selectLike() {
				let that = this
				this.$axios.post('advertisers/list', qs.stringify({
					size: 10,
					current: 1,
					aName: that.aName,
					aId: that.aId,
					role: that.role
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
		}
	}
</script>

<style>
	.header {
		width: auto;
		height: 50px;
		border: 1px solid #ddd;
		margin: 15px auto;
		border-radius: 3px 3px;
		position: relative;
	}
</style>